﻿
@{
    Layout = null;
}

<!DOCTYPE html>



<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>组织管理</title>
    <link href="~/element-ui/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/js/vue.js"></script>
    <script src="~/element-ui/element-ui/element.js"></script>
    <script src="~/js/axios.min.js"></script>
    <script src="~/js/dz.js"></script>
    
</head>
<body>
    <div id="app">
        

        <div style="margin-left:20px">
            <h1>
                <el-tag>人员管理</el-tag>
            </h1>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="姓名">
                    <el-input placeholder="请输入姓名" v-model="staff_NAME" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="部门">
                    <el-select v-model="bm" placeholder="部门">
                        <el-option v-for="item in list2" :key="item.depar_ID" :label="item.depar_NAME" :value="item.depar_ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位">
                    <el-select v-model="zw" placeholder="职位">
                        <el-option v-for="item in list3" :key="item.job_ID" :label="item.job_Name" :value="item.job_ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @@click="cx()">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-circle-outline" @@click="Add">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-left:50px;width:1200px;">
            <template>
                <el-table :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%;">
                    <el-table-column label="工号" width="100">
                        <template slot-scope="scope">
                            <span>{{ scope.row.staff_CODE }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名" width="150">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>姓名: {{ scope.row.staff_NAME }}</p>
                                <p>性别: {{ scope.row.sex }}</p>
                                <p>家庭电话: {{ scope.row.home_tel }}</p>
                                <p>邮箱: {{ scope.row.email }}</p>
                                <p>证件: {{ scope.row.certificates }}</p>
                                <p>住址: {{ scope.row.address }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.staff_NAME }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属部门" width="150">
                        <template slot-scope="scope">
                            <span>{{ scope.row.position.department.depar_NAME}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="职位" width="150">
                        <template slot-scope="scope">
                            <span>{{ scope.row.position.job_Name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="入职时间" width="150">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span>{{ scope.row.entry}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{scope.row.state.state_Name }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" @@click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @@click="handleDelete(scope.row)">删除</el-button>
                            
                            <el-dialog title="编辑人员" :visible.sync="dialogFormVisible1" width="550px" top="5px">
                                <el-form :model="form1">
                                    <el-form-item>
                                        <span>姓名：</span>
                                        <el-input style="width:150px" v-model="form1.staff_NAME"auto-complete="off"></el-input>
                                        <span>&emsp;工号：</span>
                                        <el-input style="width:160px" v-model="form1.staff_CODE" auto-complete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item >
                                        <span>性别：</span>
                                        <el-select v-model="form1.sex">
                                            <el-option v-for="item in sexlist" :key="item.id" :label="item.name" :value="item.name" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item >
                                        <span>邮箱：</span>
                                        <el-input style="width:190px" v-model="form1.email" auto-complete="off"></el-input>
                                        <span>&emsp;电话号：</span>
                                        <el-input style="width:190px" v-model="form1.home_tel" auto-complete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <span>家庭地址：</span>
                                        <el-input style="width:80%;" type="textarea" v-model="form1.Address"></el-input>
                                    </el-form-item>
                                    <el-form-item >
                                        <span>身份证号：</span>
                                        <el-input style="width:180px" v-model="form1.certificates" auto-complete="off"></el-input>
                                        <span>&emsp;入职时间：</span>
                                        <el-date-picker style="width:27%" v-model="form1.Entry"  type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="日期时间">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer"
                                     class="dialog-footer">
                                    <el-button @@click="dialogFormVisible1 = false">取 消</el-button>
                                    <el-button type="primary"
                                               @@click="udate">确 定</el-button>
                                </div>
                            </el-dialog>

                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @@size-change="handleSizeChange"
                                   @@current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[5, 10, 20, 30]"
                                   :page-size="100"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="list.length">
                    </el-pagination>
                </div>
            </template>
            <el-dialog title="添加人员"
                       :visible.sync="dialogFormVisible"
                       width="550px"
                       top="5px">
                <el-form :model="form">
                    <el-form-item>
                        <span>姓名：</span>
                        <el-input style="width:150px" v-model="form.staff_NAME"
                                  auto-complete="off"></el-input>
                        <span>&emsp;工号：</span>
                        <el-input style="width:160px" v-model="form.staff_CODE"
                                  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span>性别：</span>
                        <el-select v-model="form.sex">
                            <el-option v-for="item in sexlist" :key="item.id" :label="item.name" :value="item.name" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <span>用户：</span>
                        <el-input style="width:165px" v-model="form.username"auto-complete="off"></el-input>
                        <span>&emsp;密码：</span>
                        <el-input style="width:175px" v-model="form.password" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span>邮箱：</span><el-input style="width:190px" v-model="form.email" auto-complete="off"></el-input>
                        <span>&emsp;电话号：</span><el-input style="width:190px" v-model="form.home_tel" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="Address">
                        <span>家庭地址：</span> <el-cascader width="39%" ref="myCascader" :props="optionProps"
                                                        :options="areaList"
                                                        change-on-select
                                                        v-model="Address"
                                                        filterable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item>
                        
                        <span>详细地址：</span><el-input style="width:80%;" type="textarea" v-model="desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span>身份证号：</span><el-input style="width:180px" v-model="form.certificates"
                                                    auto-complete="off"></el-input>
                        <span>&emsp;入职时间：</span><el-date-picker style="width:27%" v-model="form.Entry"
                                                          type="datetime"
                                                          format="yyyy-MM-dd"
                                                          value-format="yyyy-MM-dd"
                                                          placeholder="日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                       <span>职位：</span> <el-select v-model="form.Job_ID">
                            <el-option v-for="item in list3" :key="item.job_ID" :label="item.job_Name" :value="item.job_ID"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                     <span>角色权限：</span><el-select v-model="form.Role_ID"><el-option v-for="item in tableData1" :key="item.role_ID" :label="item.role_Name" :value="item.role_ID" /> </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer"
                     class="dialog-footer">
                    <el-button @@click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary"
                               @@click="handleAddressFun">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                Address: {},
                dialogFormVisible: false,//弹出层默认为关闭
                dialogFormVisible1: false,//弹出层默认为关闭
                staff_ID: "",
                desc: "",
                sexlist: [{ id: 1, name: "男" }, { id: 2, name: "女" }],
                //弹出层中的表单
                form:{
                    staff_NAME:"",
                    staff_CODE: "",
                    username: "",
                    password: "",
                    email: "",
                    home_tel: "",
                    Address:"",
                    certificates: "",
                    sex:"",
                    Entry:"",
                    Job_ID:"",
                    Role_ID: "",
                    
                },
                form1: {
                    staff_ID:"",
                    staff_NAME: "",
                    staff_CODE: "",
                    email: "",
                    home_tel: "",
                    Address: "",
                    certificates: "",
                    sex: "",
                    Entry: "",
                },
                staff_NAME: null,
                bm: "",
                zw: "",
                delVisible: false,
                msg: "",//记录每一条的信息，便于取id
                list: [],
                list2: [],
                list3: [],
                currentPage: 1,
                pagesize: 5,
                total: null,
                areaList: rawCitiesData,
                area: [],
                optionProps: { //配置节点
                    value: 'code',
                    label: 'name',
                    children: 'sub'
                },
                tableData1: [],
            },
            methods: {
                udate(){
                    axios.post('/System/Upp', this.form1).then(result => {
                        if (result.data == "1") {
                            this.$message({
                                showClass: true,
                                message: "修改成功",
                                type: "success"
                            })
                            this.load();
                        } else {
                            this.$message.error("修改失败(姓名、用户、工号已存在)");
                        }
                    })
                },
                handleEdit(index,row) {
                    this.dialogFormVisible1 = true //开启弹出层
                    this.form1.staff_ID = row.staff_ID
                    this.form1.staff_NAME = row.staff_NAME
                    this.form1.staff_CODE = row.staff_CODE
                    this.form1.email = row.email
                    this.form1.home_tel = row.home_tel
                    this.form1.Address = row.address
                    this.form1.certificates = row.certificates
                    this.form1.sex = row.sex
                    this.form1.Entry=row.entry
                },
                
                handleAddressFun() {
                    this.form.Address =this.$refs['myCascader'].presentText + "/" +this.desc
                    axios.post("/System/AddRole", this.form).then(result => {
                        if (result.data == "1") {
                            this.$message({
                                showClass: true,
                                message: "添加成功",
                                type: "success"
                            })
                            this.load();
                        } else {
                            this.$message.error("添加失败(姓名、用户、工号已存在)");
                        }
                    })

                },
                Add() {
                    this.dialogFormVisible = true //开启弹出层
                 
                },
                Addp(val) {
                    this.getCensusLand(val);
                    

                    
                },
                load() {
                    var params = { staff_NAME: this.staff_NAME };
                    axios.post("/System/SelectPersonnel", params).then(result => {
                        this.list = result.data;
                    })
                    axios.get("/User/Roles",).then(res => {
                        this.tableData1 = res.data;
                    })

                },
                cx() {
                    var params = { staff_NAME: this.staff_NAME };
                    axios.post('/System/SelectPersonnel', params).then(result => {
                        console.log(result.data);
                        this.list = result.data;
                    })
                },
                depart() {
                    axios.get("/System/Selectdepartments").then(result => {
                        this.list2 = result.data;
                    })
                },
                posit() {
                    axios.get("/System/SelectPosition").then(result => {
                        this.list3 = result.data;
                    })
                },
                add() {
                    window.location.href = "/System/AddPersonnel";
                },
                handleSizeChange(val) {
                    this.pagesize = val;
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                    console.log(`当前页: ${val}`);
                },
                handleDelete(row) {
                    var params = { staff_ID: row.staff_ID}
                    this.$confirm("你确定要删除吗？", '提示', {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        axios.post('/System/Delete', params).then(da => {
                            if (da.data == "1") {
                                this.$message({
                                    showClass: true,
                                    message: "删除成功",
                                    type: "success"
                                })
                                this.load();
                            } else {
                                this.$message.error("删除失败");
                            }
                        })
                    })
                }
            },
            created() {
                this.load();
                this.depart();
                this.posit();
            }
        })
    </script>
</body>
</html>
